<%@ include file="/taglibs.jsp"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<style>
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
	#sortable li {/* line-height: 1em;  */margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1em; 
	/* height: 18px; */ }
	#sortable li span { position: absolute; margin-left: -1.3em; }
	</style>
	<script>
	$(function() {
		$( "#sortable" ).sortable();
		$( "#sortable" ).disableSelection();
	});
	</script>


<head>
	<title><fmt:message key="attachFileList.title"/></title>
	<script type="text/javascript" src="${ctx}/scripts/searchFile_module.js"></script>
	<script type="text/javascript" src="${ctx}/scripts/jquery-ui-1.8.custom.min.js"></script>
	<link rel="stylesheet" href="${ctx}/styles/redmond/jquery-ui-1.8.custom.css" type="text/css" media="all"/>
</head>
<button type="submit" class="button" name="save" onclick="location.href='edit_attach_file.html?fieldId=${fieldId}&cateId=${cateId}&cateTypeId=${cateTypeId}';">
	<fmt:message key="button.add.title"></fmt:message>
	<img src="${ctx}/images/btn_add.png" align="left" height="20" width="20">
</button>
<button type="submit" class="button" name="save" onclick="location.href='search_attach_file.html';">
	<fmt:message key="button.search.title"></fmt:message>
	<img src="${ctx}/images/btn_search.png" align="left" height="20" width="20">
</button>	
<br/>
<s:form name="attachFilesByCateForm" action="attachFilesByCate" method="post" validate="true" >

	<s:select key="file.field" name="fieldId" list="fields" listKey="id" listValue="name" headerKey="%{getText('select.default.key')}" headerValue="%{getText('select.default.value')}"></s:select><br/>
	<s:select key="file.category" cssStyle="max-width: 500px !important;" name="cateId" list="catList" htmlId="cateId"  id="cateId" listKey="value" listValue="name" headerKey="%{getText('select.default.key')}" headerValue="%{getText('select.default.value')}" onchange="form.submit()" ></s:select>
	<s:select key="file.categoryType" list="lstCategoryType" cssStyle="max-width: 500px !important;" name="cateTypeId" listKey="id" listValue="name" headerKey="%{getText('select.default.key')}" headerValue="%{getText('select.default.value')}" required="true" onchange="form.submit()"/>
<table width="100%">
<tr>
	<td colspan="2">
		<p><s:text name="category.attachfiles.list"></s:text></p>
	</td>
</tr>
<tr>
	<td colspan="2"><div class="demo">
			<ul id="sortable">
				<s:iterator status="counter" var="file" value="attachFiles" >
					<li class="ui-state-default" style="cursor: move;">
						<!-- Heading -->
						<c:if test="${file.heading}">
							<input type="hidden" name="arrAttachFiles" value="${file.id}">
							<c:out value="${file.attachFileName}" escapeXml="false"></c:out>
						</c:if>
						<!-- Item -->
						<c:if test="${!file.heading}">
							<span class="ui-icon ui-icon-arrow-4"></span>
							<input type="hidden" name="arrAttachFiles" value="${file.id}">
							<s:property value="#file.position + 1" /> - 
							<c:out value="${file.attachFileName}" escapeXml="false"></c:out>
							
						</c:if>
						<div align="left">
								<a class="button" href="edit_attach_file.html?id=${file.id}"><fmt:message key="button.edit.title"></fmt:message></a>
								<a class="button" onclick="return confirm('<fmt:message key="message.delete.confirm"></fmt:message>')" href="delete_attach_file_on_list.html?id=${file.id}&fieldId=${fieldId}&cateId=${cateId}&cateTypeId=${cateTypeId}"><fmt:message key="button.delete.title"></fmt:message></a>
								<a class="button" href="copy_attach_file.html?id=${file.id}"><fmt:message key="button.copy.title"></fmt:message></a>
						</div>
					</li>
				</s:iterator>
			</ul>
	</div><!-- End demo --></td>
</tr>
<tr>
	<td colspan="2">
	<c:if test="${fn:length(attachFiles) gt 0}">
		<button style="text-align: center;" type="submit" class="button" name="save">
			<fmt:message key="button.save.sort.title"></fmt:message>
			<img src="${ctx}/images/btn_save.png" align="left" height="20" width="20">
		</button>
	</c:if>
	</td>
</tr>
	</table>
</s:form>
